package io.modifier.basic.compose.animation

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.FastOutLinearInEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.VectorConverter
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.animateValue
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.focusable
import androidx.compose.foundation.hoverable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsFocusedAsState
import androidx.compose.foundation.interaction.collectIsHoveredAsState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Face
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import io.modifier.basic.compose.theme.AppTheme

// https://juejin.cn/post/7406585419472601140

@Preview
@Composable
private fun Box1Preview() {
    AppTheme {
        Column(Modifier.background(Color.White)) {
            Box1()
        }
    }
}

@Composable
private fun Box1() {
    val shape = remember { RoundedCornerShape(8.dp) }
    val interactionSource = remember { MutableInteractionSource() }
    val focused = interactionSource.collectIsFocusedAsState().value
    val color1 by animateColorAsState(
        if (focused) Color(0, 219, 222) else Color.Transparent,
        tween(600), //修改这个地方
        label = "",
    )
    val color2 by animateColorAsState(
        if (focused) Color(252, 0, 255) else Color.Transparent,
        tween(1200), label = "",
    )
    Box(
        modifier = Modifier
            .size(190.dp, 250.dp)
            .background(Color.Black, shape)
            .focusable(enabled = true, interactionSource)
            .border(
                3.dp,
                Brush.linearGradient(
                    listOf(
                        color1, // 重点
                        color2, // 重点
                    ),
                    start = Offset.Zero,
                    end = Offset(300f, 300f),
                ),
                shape,
            ),
        contentAlignment = Alignment.Center,
    ) {
        Icon(
            Icons.Outlined.Face,
            contentDescription = null,
            tint = Color.Cyan,
            modifier = Modifier
                .fillMaxSize(0.5f),
        )
    }

}


//@Preview
@Composable
private fun Box2Preview() {
    AppTheme {
        Column(Modifier.background(Color.White)) {
            Box2()
        }
    }
}

@Composable
private fun Box2() {
    val shape = remember { RoundedCornerShape(8.dp) }
    val interactionSource = remember { MutableInteractionSource() }
    val infiniteTransition = rememberInfiniteTransition(label = "")
    val alpha by infiniteTransition.animateFloat(
        1f, 0.3f,
        infiniteRepeatable(
            tween(2000, 0, easing = FastOutLinearInEasing),
            repeatMode = RepeatMode.Reverse,
        ),
        label = "",
    )
    val radius by infiniteTransition.animateFloat(
        350f, 100f,
        infiniteRepeatable(
            tween(2000, 0, easing = FastOutLinearInEasing),
            repeatMode = RepeatMode.Reverse,
        ),
        label = "",
    )
    Box(
        modifier = Modifier
            .size(190.dp, 250.dp)
            .background(Color.Black, shape)
            .hoverable(interactionSource)
            .border(
                3.dp,
                Brush.radialGradient(
                    listOf(
                        Color.White.copy(alpha),
                        Color.DarkGray,
                    ),
                    center = Offset.Zero,
                    radius = radius,
                ),
                shape,
            ),
        contentAlignment = Alignment.Center,
    ) {
        Icon(
            Icons.Outlined.Face,
            contentDescription = null,
            tint = Color.Cyan,
            modifier = Modifier
                .fillMaxSize(0.5f),
        )
    }

}


@Preview
@Composable
private fun Box3Preview() {
    AppTheme {
        Column(Modifier.background(Color.White)) {
            FlowingCard()
        }
    }
}

//https://juejin.cn/post/7300784595619233819
//这个url是我发现这个效果的网址
@Composable
private fun FlowingCard() {
    val shape = remember { RoundedCornerShape(8.dp) }
    var size by remember { mutableStateOf(IntSize.Zero) }
    val interactionSource = remember { MutableInteractionSource() }
    val hover by interactionSource.collectIsHoveredAsState()
    val infiniteTransition = rememberInfiniteTransition(label = "")
    val center by infiniteTransition.animateValue(
        Offset.Zero,
        Offset(size.width.toFloat(), size.height.toFloat()),
        typeConverter = Offset.VectorConverter,
        infiniteRepeatable(
            keyframes {
                durationMillis = 2000   //动画执行时长
                Offset.Zero at 0
                Offset(size.width.toFloat(), 0f) at 400
                Offset(size.width.toFloat(), size.height.toFloat()) at 1000
                Offset(0f, size.height.toFloat()) at 1400
                Offset.Zero at 2000
            },
            repeatMode = RepeatMode.Restart,
        ),
        label = "",
    )
    Box(
        modifier = Modifier
            .size(190.dp, 250.dp)
            .onGloballyPositioned {
                size = it.size
            }
            .background(Color.Black, shape)
            .hoverable(interactionSource)
            .border(
                4.dp,
                Brush.radialGradient(
                    listOf(
                        Color(1, 209, 125),
                        Color.Transparent,
                    ),
                    center = center,
                    radius = 100f,
                ),
                shape,
            ),
        contentAlignment = Alignment.Center,
    ) {
        Icon(
            Icons.Outlined.Face,
            contentDescription = null,
            tint = Color.Cyan,
            modifier = Modifier
                .fillMaxSize(0.5f),
        )
    }
}
